<template>
  <div class="auth-realname">
      <!-- 实名认证 -->
      <div class="container">
          <div class="model-title">实名认证</div>
          <div class="form-box">
              <div class="submit-img">
                 <!-- <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>     -->
                <!-- <form :action="actionUrl" method="post" target="nm_iframe" enctype="multipart/form-data"> -->
                    <div class="form-layout">
                        <div class="form-label">上传照片</div>
                        <div>
                          <div class="form-cell"><input class="form-input" type="file" ref="img1" name="image"/></div>
                          <div class="form-cell"><input class="form-input" type="file" ref="img2"  name="image"/></div>
                          <div class="form-cell"><input class="form-input" type="file" ref="img3"  name="image"/></div>
                          <!-- <div class="form-cell"><input class="form-input" type="hidden" v-model="token"  name="token"/></div>                     -->
                        </div>
                    </div>
                    <!-- <div class="form-layout">
                        <div class="form-label">手机号码</div>
                        <div>
                            <div class="form-cell"><input class="form-input" type="text" v-model="phone"  name="phone" placeholder="请输入手机号码"/></div>
                       </div>
                    </div> -->
                    <!-- <div style="padding-left:100px" class="form-cell">
                      <el-button type="danger" @click="submitImg" style="width:200px">提交照片</el-button>
                    </div> -->
                <!-- </form> -->
              </div>
              <div class="realname-check">
                <el-form :model="realForm" :rules="rules" ref="realForm" label-width="100px">
                  <el-form-item label="手机号码">
                     <el-input v-model="realForm.phone" placeholder="请输入用户手机号"></el-input>
                  </el-form-item>
                  <el-form-item label="姓名">
                      <el-input v-model="realForm.realname" placeholder="请输入用户姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号码">
                      <el-input v-model="realForm.idcard" placeholder="请输入用户身份证号码"></el-input>
                  </el-form-item>
                  <el-form-item >
                    <div class="hot-tips">请先提交审核照片再提交实名信息</div>
                     <el-button type="danger" @click="handleAuth" style="width:200px">实名认证</el-button>
                  </el-form-item>
                </el-form>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name:'auth-realname',
  data () {
    return {
        // actionUrl:this.$Http.defaults.baseURL + "user/upload/realname",
        
        realForm:{
          phone:null,
          idcard:null,
          realname:null
        },
        rules:{
          phone:{required: true, message: '请输入手机号', trigger: 'blur' },
          idcard:{required: true, message: '请输入身份证号', trigger: 'blur' },
          realname:{required: true, message: '请输入真实姓名', trigger: 'blur' }
        }
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    handleAuth(){
      this.$refs.realForm.validate((valid) => {
          if (valid) {
            this.authRealname();
            this.submitImg();
          } else {
            console.log('error submit!!');
            return false;
          }
      });
    },
    authRealname(){
      // 点击实名认证
      let url = `paymentchannel/realname/auth/backstage`,
          params = `realname=${this.realForm.realname}&idcard=${this.realForm.idcard}&phone=${this.realForm.phone}`;
      this.$Http.post(url,params).then(res=>{
          this.$message.success("提交成功！请等待审核！");
      }).catch(err=>{
          this.$message.error("提交失败！请重新尝试！");
      })

    },
    submitImg(){
      let token = sessionStorage.getItem(1);
      let formData = new FormData();
      let img1 = this.$refs.img1.files[0];
      let img2 = this.$refs.img2.files[0];
      let img3 = this.$refs.img3.files[0];
      if(!  img1 || !img2 || !img3){
         this.$message.error("缺少必要的图片");
        return;
      }
      if(!token){
        this.$message.error("无法获取token");
        return;
      }
      if(!/^1[1-9][0-9]\d{4,8}$/.test(this.realForm.phone)){
        this.$message.error("手机号格式有误！");
        return;
      }
      formData.append('image',img1);
      formData.append('image',img2);
      formData.append('image',img3);
      formData.append('token',token);
      formData.append('phone',this.realForm.phone);
      let config = {
            headers: {
                'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
            }
      };
      let url = "user/upload/realname";
        this.$Http.post(url, formData, config).then((res) => {
          this.$message.success(res.data.resp_message);
      }).catch((error) =>{
        this.$message.error("提交照片信息失败！");
      });
    }
  }
}

</script>
<style scoped>
.auth-realname{
  padding: 20px;
  box-sizing: border-box;
}
.realname-check{
  padding: 20px;
}
.form-layout{
 display: flex;
 justify-content: flex-start;
 align-items: center;
}
.submit-img{
  padding: 20px ;
  border-bottom: 1px solid #ededed;
  box-sizing: border-box;
}
.form-label{
  width: 100px;
  text-align: right;
  box-sizing: border-box;
  padding-right: 16px;
}
.form-cell{
  width: 400px;
  padding: 10px;
}
.form-input{
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 32px;
    line-height: 32px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
.btn{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
    font-size: 12px;
    border-radius: 3px;
    width: 200px;
    padding: 9px 15px;
}
</style>